<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>幸运大转盘</title>

    <link rel="stylesheet" href="./GB-canvas-turntable.css">
    <link rel="stylesheet" type="text/css" href="./hlhs.css">
</head>

<body>
    <div class="bg" alt="">
    <div class="zhuanp">
        <ul class="group">
            <li><label><input type="radio" name="group" value="0" /> <span>特等奖</span></label></li>
            <li><label><input type="radio" name="group" value="1" /> <span>一等奖</span></label></li>
            <li><label><input type="radio" name="group" value="2" /> <span>二等奖</span></label></li>
            <li><label><input type="radio" name="group" value="3" /> <span>三等奖</span></label></li>
        </ul>
        <section id="turntable" class="gb-turntable">
            <div class="gb-turntable-container">
                <canvas class="gb-turntable-canvas" width="600" height="600px">抱歉！浏览器不支持。</canvas>
                <!-- <ul class="gb-turntalbe-list"> -->
                    <!-- <li class="gb-turntable-item"> <span style="transform: rotate(0turn)">1元红包</span> </li>
                    <li class="gb-turntable-item"> <span style="transform: rotate(0.125turn)">2元红包</span> </li>
                    <li class="gb-turntable-item"> <span style="transform: rotate(0.25turn)">100元红包</span> </li>
                    <li class="gb-turntable-item"> <span style="transform: rotate(0.375turn)">3元红包</span> </li>
                    <li class="gb-turntable-item"> <span style="transform: rotate(0.5turn)">显示器</span> </li>
                    <li class="gb-turntable-item"> <span style="transform: rotate(0.625turn)">5元红包</span> </li>
                    <li class="gb-turntable-item"> <span style="transform: rotate(0.75turn)">6元红包</span> </li>
                    <li class="gb-turntable-item"> <span style="transform: rotate(0.875turn)">笔记本电脑</span> </li> -->
                <!-- </ul> -->
            </div>

            <a class="gb-turntable-btn" href="javascript:;">抽奖</a>
        </section>
        <ul id="loggetid" class="logget">
            <li>
                <div class="box-title">特等奖</div>
                <div class="box-text"></div>
            </li>
            <li>
                <div class="box-title">一等奖</div>
                <div class="box-text"></div>
            </li>
            <li>
                <div class="box-title">二等奖</div>
                <div class="box-text"></div>
            </li>
            <li>
                <div class="box-title">三等奖</div>
                <div class="box-text"></div>
            </li>
        </ul>
    </div>
    <script src="./jquery.min.js"></script>
    <script src="./GB-canvas-turntable.js"></script>
    <script>
        $(function(){
            var g_data = [{text:'1'}
    ,{text:'2'}
    ,{text:'3'}
    ,{text:'4'}
    ,{text:'5'}
    ,{text:'6'}
    ,{text:'7'}
    ,{text:'8'}
    ,{text:'9'}
    ,{text:'10'}
    ,{text:'11'}
    ,{text:'12'}
    ,{text:'13'}
    ,{text:'14'}
    ,{text:'15'}
    ,{text:'16'}
    ,{text:'17'}
    ,{text:'18'}
    ,{text:'19'}
    ,{text:'20'}
    ,{text:'21'}
    ,{text:'22'}
    ,{text:'23'}
    ,{text:'24'}
    ,{text:'25'}
    ,{text:'26'}
    ,{text:'27'}
    ,{text:'28'}
    ,{text:'29'}
    ,{text:'30'}
    ,{text:'31'}
    ,{text:'32'}
    ,{text:'33'}
    ];
    
            var g_lucks;
            var chancesList = [1,2,6,12];
    
            if(localStorage.lucks){
                g_lucks = JSON.parse(localStorage.lucks);
                        
                var newData = [];
    
                for (let index = 0; index < g_data.length; index++) {
                    const item = g_data[index];
                    if(localStorage.lucks.indexOf(item.text) == -1){
                        newData.push(item);
                    }
                }
                g_data = newData;
            }else{
                g_lucks = []
            }
    
            getChances();
            checkChances();
            refreshTurntable();
    
            function getChances(){
                for (let index = 0; index < g_lucks.length; index++) {
                    const item = g_lucks[index];
                    const itemChance = item ? item.length : 0;
                    chancesList[index] -= itemChance;
                    $('#loggetid li').eq(index).children('.box-text').text(g_lucks[index] || '');
                }
            }
    
            function checkChances(){
                for (let index = 0; index < chancesList.length; index++) {
                    const item = chancesList[index];
                    if(chancesList[index] > 0){
                        $('.group li').eq(index).find('input').removeAttr('disabled');
                    }else{
                        $('.group li').eq(index).find('input').attr('disabled', 'disabled').removeAttr('checked');
                    }
                }
            }
    
            function refreshTurntable() {
                gbTurntable.init({
                    id: 'turntable',
                    config: function (callback) {
                        // 获取奖品信息
                        // callback && callback(['11元红包','2元红包','3元红包','4元红包','5元红包','6元红包']);
                        callback && callback(g_data)
                    },
                    getPrize: function (callback) {
                        // 获取中奖信息
                        var num = Math.floor((Math.random()*g_data.length)); //Math.random() * 33 >>> 0, //奖品ID
                        var checkedGroup = $('input[type="radio"]:checked').val();
                        var chances = chancesList[checkedGroup]; // 可抽奖次数
                        callback && callback([num, chances]);
                    },
                    gotBack: function (data) {
                        console.log('恭喜抽中 - ' + data);
                        var checkedGroup = $('input[type="radio"]:checked').val();
                        g_lucks[checkedGroup] ? g_lucks[checkedGroup].push(data) : g_lucks[checkedGroup] = [data];
    
                        $('#loggetid li').eq(checkedGroup).children('.box-text').text(g_lucks[checkedGroup]);
                        localStorage.lucks = JSON.stringify(g_lucks);
                        g_data.length = g_data.length - 1;
                        chancesList[checkedGroup] -= 1;
    
                        checkChances();
                    }
                });
            }
        })
    </script>


</body></html>